<template>
    <div class="Home">
        <!-- 遍历VideoList数组，渲染每个视频组件 -->
        <ul>
            <li v-for="(item, index) in VideoList" :key="index">
                <!-- 使用H265webjs组件，传入视频的url、name和id -->
                <H265webjs :url="item.url" :name="item.name" :id="item.id"></H265webjs>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import H265webjs from "@/components/h265webjs/index.vue";

// 定义VideoList数组，包含视频的id、name和url
const VideoList = ref([
    {
        id: "1",
        name: "视频1",
        url: "http://172.26.70.183:50000/rtp/11010001542001000004_11011313541327000104.live.flv",
    },
    {
        id: "2",
        name: "视频2",
        url: "http://172.26.70.183:50000/rtp/11010001542001000004_11011313541327000104.live.flv",
    },
]);
</script>

<style lang="less" scoped>
.Home {
    ul {
        display: flex;
        flex-wrap: wrap;

        li {
            width: 50%;
            height: 50vh;
            box-sizing: border-box;
            border: 1px solid #ccc;
            margin: 10px;
        }
    }
}
</style>
